<script setup>
import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import {onMounted, ref, reactive} from "vue";
import {getResponseData, myPage} from "../../../request/index.js";
import {deleteApi, deleteBatchApi, excelApi, listApi, pageApi} from "../../../api/axios.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {datetimeFormat, isNotNull} from "../../../util/index.js";
import {endClubProgressApi} from "../../../api/clubProgress.js";

// 班级下拉菜单
let clubOptions = ref([]);
// 课程下拉菜单
let courseOptions = ref([]);

// 路径导航
const navItems = [
  {icon: 'Platform', label: '班级管理'},
  {icon: 'More', label: '班级进度列表'}
];
// 数据头
const headItems = [
  {type: 'opt', span: 5, placeholder: '班级', callback: pageByClubId, options: clubOptions.value},
  {type: 'opt', span: 5, placeholder: '课程', callback: pageByCourseId, options: courseOptions.value},
];

// 表格列
const columns = [
  {label: '状态', prop: 'endTime', format: e => isNotNull(e) ? '已结束' : '', width: 65},
  {label: '班级', prop: 'club.title', width: 100},
  {label: '课程', prop: 'course.title', width: 150},
  {label: '房间', prop: 'room.title'},
  {label: '老师', prop: 'teacher.realname', width: 100},
  {label: '班主任', prop: 'manager.realname', width: 100},
  {label: '助教', prop: 'assistant.realname', width: 100},
  {label: '进度开始时间', prop: 'startTime', format: datetimeFormat},
  {label: '预计结束时间', prop: 'expectedEndTime', format: datetimeFormat},
  {label: '实际结束时间', prop: 'endTime', format: datetimeFormat},
  {label: '班级排序', prop: 'idx', width: 90},
  {label: '班级进度描述', prop: 'info', type: 'card', width: 520},
];

// 按钮列
const buttons = [
  {label: '立即结束', callback: endClubProgress},
]

/* ==================== 立刻结束 ==================== */

function endClubProgress(row) {
  ElMessageBox.confirm('确认立刻结束改进度吗？').then(() => {
    endClubProgressApi(row['id']).then(res => {
      let data = getResponseData(res);
      if (data) {
        ElMessage.success('班级进度已结束');
        page();
      }
    }).catch(() => {
      ElMessage.info('已取消');
    });
  });
}


/* ==================== 分页查询 ==================== */

// 表格数据 + 分页数据 + 班级标题 + 课程标题
let records = ref();
let pageInfo = reactive({pageNum: 1, pageSize: 5, total: 0, callback: page});
let fkClubId = ref();
let fkCourseId = ref();

async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {
  // 分页参数
  let config = {
    api: pageApi,
    args: {module: 'clubProgress'},
    params: {pageNum, pageSize},
    records, pageInfo
  };
  // 若班级标题不为空，则附加为分页条件
  if (fkClubId.value) config['params']['fkClubId'] = fkClubId.value;
  // 若课程标题不为空，则附加为分页条件
  if (fkCourseId.value) config['params']['fkCourseId'] = fkCourseId.value;

  // 发送分页请求
  await myPage(config);
}

/* ==================== 搜索班级标题 ==================== */

function pageByClubId(val) {
  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (val || fkClubId.value) {
    fkClubId.value = val;
    page();
  }
}

/* ==================== 搜索课程标题 ==================== */

function pageByCourseId(val) {
  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (val || fkCourseId.value) {
    fkCourseId.value = val;
    page();
  }
}


/* ==================== 删除成功回调 ==================== */

function deleteSuccess() {
  ElMessage.success('删除成功！');
  page();
}

/* ==================== 报表打印 ==================== */

function downloadExcel() {
  excelApi('/clubProgress/excel', '课程进度报表');
}

/* ==================== 加载函数 ==================== */

onMounted(async () => {
  await page();
  // 查询全部班级，并添加到下拉菜单中
  Object.values(getResponseData(await listApi({module: 'club'}))).forEach(club => {
    clubOptions.value.push({label: club['title'], value: club['id']});
  });

  // 查询全部课程，并添加到下拉菜单中
  Object.values(getResponseData(await listApi({module: 'course'}))).forEach(course => {
    courseOptions.value.push({label: course['title'], value: course['id']});
  });
});

</script>

<template>
  <my-nav :items="navItems"/>
  <my-head :items="headItems"/>
  <my-table module="clubProgress"
            insert-page="/clubProgressInsert"
            update-page="/clubProgressUpdate"
            :buttons="buttons"
            :records="records"
            :columns="columns"
            :delete-api="deleteApi"
            :delete-batch-api="deleteBatchApi"
            :delete-callback="deleteSuccess"
            :excel-api="downloadExcel"
            :pageInfo="pageInfo"/>
</template>

<style scoped lang="scss"></style>